fix(ui): align button states and action roles with UIKit - #2901
Merged
Conversation
Make outline and text surfaces transparent, align fill and primary feedback with the UIKit design, and preserve variant-specific disabled content. Keep all existing button dimensions, spacing, typography and icon sizes. Publish Button-owned theme colors across light, dark and contrast modes; preserve shared action colors, branded presets and explicit legacy Appearance overrides. Show the same public buttons on two Design Lab backgrounds and refresh the generated desktop and offline theme projections.
Use primary for submit, save, create, and confirm actions, and fill for cancel or dismiss actions. Correct shared confirmations, approval actions, notifications, recommendations, Canvas primary mapping, and Design Lab examples. Keep danger semantics and intentional selection/utility variants. Preserve dimensions, callbacks, disabled/loading conditions, and transport logic. Document variant roles and cover shared confirmation choices, notification actions, settings actions, Canvas mapping, and AskUser output. Validation: design-system:check; check:web; 20 shared action regression tests; 110 focused editor tests. Manual visual and live remote checks remain pending.
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Align button colors, interaction states, and action roles with the UIKit design.
Type and Areas
Type: Bug fix / UI/UX
Areas: Design system, Web UI, Appearance themes, Design Lab, Canvas SDK, desktop bootstrap styles
Motivation / Impact
Several screens used outlined cancellation buttons and low-emphasis fill buttons for their main actions. Updating component colors alone did not correct these choices.
This change makes action emphasis consistent across product surfaces while preserving intentional utility buttons, selection feedback, and destructive-action colors. Existing Appearance overrides and branded themes retain compatibility.
Verification
Passed during implementation:
Shared action regression tests — 20 passed:
pnpm --dir src/web-ui exec vitest run --maxWorkers=50% \ src/infrastructure/confirm-dialog/ConfirmDialogRenderer.test.tsx \ src/infrastructure/confirm-dialog/confirmDialogService.test.ts \ src/infrastructure/config/components/common/ConfigActionBar.test.tsx \ src/shared/notification-system/components/NotificationItem.test.tsx \ src/tools/openbitfun-canvas/runtime/sdk/adapters.test.tsx \ src/tools/openbitfun-canvas/runtime/sdk/adapters.test.tsFocused editor regression tests — 110 passed:
pnpm --dir src/web-ui exec vitest run --maxWorkers=50% \ src/tools/editor/components/MarkdownEditor.test.tsx \ src/tools/editor/meditor/components/MEditor.test.tsx \ src/tools/editor/meditor/utils/tiptapMarkdown.test.ts \ src/tools/editor/meditor/utils/embeddedSource.test.ts \ src/tools/editor/meditor/utils/markdownFrontmatter.test.ts \ src/tools/editor/meditor/components/Preview.test.tsx \ src/tools/editor/meditor/utils/loadLocalImages.test.ts \ src/infrastructure/markdown/rehypeSourceRange.test.ts \ src/infrastructure/markdown/MarkdownRenderer.test.tsxSource comparison confirmed that the usage migration preserves dimensions, content, callbacks, disabled/loading conditions, and transport logic.
Manual visual acceptance and live testing of remote workspaces, Remote Control, Peer Device Mode, and Detached Dispatch remain pending. Local checks do not establish remote behavior.
Reviewer Notes
Checklist